<template>
  <div class="credit-display">
    <header>
      <div class="cd-header">
        <span class="left">快速申请信用卡</span>
        <span class="right">
          您的位置:
          <a href="#">信用卡</a> >
          <a href="#">快速申请信用卡</a>
        </span>
      </div>
    </header>
    <main class="cd-main">
      <div class="title">
        <ul class="tab-list">
          <li
            class="tab-li"
            :class="currentIdx === index ? 'active' : ''"
            :key="index"
            v-for="(item, index) in tabs"
            @click="cutTabClick(item, index)"
          >
            {{ item.creditTypeName }}
          </li>
        </ul>
        <hot-product :tab="tabs[currentIdx]"></hot-product>
      </div>
    </main>
  </div>
</template>

<script type="text/ecmascript-6">
import HotProduct from './HotProduct'
export default {
  name: 'CreditDisplay',
  mixins: [],
  components: {
    HotProduct
  },
  props: {},
  data () {
    return {
      tabs: [],
      currentIdx: 0
    }
  },
  computed: {},
  watch: {},
  methods: {
    cutTabClick (item, index){
		window.sa.track("$CollectCreditTypeClick", {
			$element_content: item.id
		});
      this.currentIdx = index
    }
  },
  filters: {},
  mounted () {},
  created () {
    let obj = {
      id: '0',
      creditTypeName: '全部'
    }
    this.tabs.unshift(obj)
    this.$remote('/runtime/pocCreditType/selectCreditTypeNameList.action').then(res => {
      res.forEach(item => {
        this.tabs.push(item)
      })
    })
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
.credit-display
  padding 0px 20px
  flex 1
  .cd-main
    // padding 20px
  .cd-header
    height 36px
    line-height 36px
    display flex
    justify-content space-between
    border-bottom 2px solid #06469e
    position relative
    .left
      color #06469e
      font-weight 600
      display block
      margin-left 10px
      &:before
        content: ''
        position absolute
        left 0px
        top 12px
        width 2px
        height 12px
        background-color #06469e
    .right
      font-size 12px
  .title
    .tab-list
      display flex
      flex-wrap wrap
      padding 15px 0
      // border-bottom 1px solid #ccc
    .tab-li
      // flex 1
      height 24px
      border 1px solid #ccc
      border-radius 19px
      text-align center
      line-height 14px
      font-size 14px
      color #333
      margin-right 10px
      padding 5px 10px
      cursor pointer
    /*点击后样式*/
    .active
      color #17529a
      border-color #17529a
    .tab-li:hover {
        cursor pointer
    }
</style>
